<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/css/bootstrap.css">
  <script src="/js/jquery-3.6.1.min.js"></script>
  <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">



</head>
<body>
<div style="right: 50px;width: 300px">
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalTeacher" onclick="preAddTeacher();">
    新增教师
  </button>
</div>
<div class="modal fade" id="exampleModalTeacher" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">编辑教师信息</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!--模态框内容-->
        <form id="formTeacher">
          <input  hidden="hidden" id="idTeacher" name="id"/>
          <div class="mb-3">
            <label class="form-label">工号:</label>
            <input type="text" class="form-control" id="tno" name="tno">
          </div>
          <div class="mb-3">
            <label class="form-label">姓名：</label>
            <input type="text" class="form-control" id="tname" name="tname">
          </div>
          <div class="mb-3">
            <label class="form-label">性别：</label>
            <select class="form-select" id="sexTeacher" name="sex">
              <option value="0">未知</option>
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">年龄:</label>
            <input type="text" class="form-control" id="ageTeacher" name="age">
          </div>
          <div class="mb-3">
            <label class="form-label">职称:</label>
            <input type="text" class="form-control" id="profTeacher" name="prof">
          </div>
          <div class="mb-3">
            <label class="form-label">工资:</label>
            <input type="text" class="form-control" id="salTeacher" name="sal">
          </div>
          <div class="mb-3">
            <label class="form-label">密码:</label>
            <input type="text" class="form-control" id="passwordTeacher" name="password">
          </div>
          <div class="mb-3">
            <label class="form-label">所在院系:</label>
            <input type="text" class="form-control" id="deptTeacher" name="dept">
          </div>
        </form>
      </div>
      <div class="modal-footer">

        <button type="button" class="btn btn-primary" onclick="saveTeacher();">提交更改</button>
      </div>
    </div>
  </div>
</div>

<div class = "container-fluid">
  <table class="table table-striped" id = "stuTable">
  </table>

  <form id="searchForm">
    <div class="input-group mb-3">
      <select class="form-select" id="searchOption" name="searchOption">
        <option value = "10">以工号查询</option>
        <option value = "11">以姓名查询</option>>
        <option value = "12">以性别查询</option>
        <option value = "14">以职称查询</option>
        <option value = "15">以院系查询</option>
      </select>
      <input name="name" id="name" type="text" placeholder="请输入" class="w-50 form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
      <button type="button" class="btn btn-outline-secondary" onclick="searchTeacher();"> 查询 </button>
    </div>
  </form>

  <table class="table table-dark table-striped" id="studentTb2">

  </table>

</div>



<script src="/js/bootstrap.min.js"></script>

<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">
  function search(){

    $('#stuTable').bootstrapTable("destroy");
    loadTable();
  }

  function searchTeacher(){

    $('#studentTb2').bootstrapTable("destroy");

    var searchOption = $("#searchOption").val();

    var name = $("#name").val();

    var searchMatching = $("#searchMatching").val();

    $("#studentTb2").bootstrapTable({
      url: '/administrator/searchTeacher',
      striped: true, //隔行变色
      pagination: true, //底部显示分页条
      singleSelect: false, //禁止多选
      pageSize:4, //每一页有几条数据
      pageNumber:1, //设置了分页，首页页码
      sidePagination: "server", //设置在何处分页，可选值为client或者server
      queryParams: function (params){
        var paraObj = {
          size: params.limit,
          page:params.offset/params.limit,
          sort:"id",
          direct:"asc",
          pageNum:this.pageNumber,
          name:name+"!"+searchOption+"!"+searchMatching,
        };
        return paraObj;
      },
      columns: [{
        field: 'id',
        title: '序号',
        width: 50
      }, {
        field: 'tno',
        title: '工号',
        width: 130
      }, {
        field: 'tname',
        title: '姓名',
        width: 100
      }, {
        field: 'sex',
        title: '性别',
        width: 30
      }, {
        field: 'age',
        title: '年龄',
        width: 10,
      }, {
        field: 'prof',
        title: '职称',
        width: 50,
      }, {
        field: 'sal',
        title: '工资',
        width: 50,
      }, {
        field: 'dept',
        title: '所在院系',
        width: 50,
      }, {
        field: 'password',
        title: '密码',
        width: 50,
      }, {
        field: 'tno',
        title: '处理',
        width: 50,
        formatter:chuLiFormatterTeacher
      }],
      responseHandler: function (res){
        console.log(res);
        return {
          "total":res.data.total,
          "rows":res.data.rows
        };
      },
    })
  }


  function loadTable(){

    $('#stuTable').bootstrapTable({
      url: '/administrator/displayListTeacher',
      striped: true, //隔行变色
      pagination: true, //底部显示分页条
      singleSelect: false, //禁止多选
      pageSize:5, //每一页有几条数据
      pageNumber:1, //设置了分页，首页页码
      sidePagination: "server", //设置在何处分页，可选值为client或者server
      queryParams: function (params){
        var paraObj = {
          size: params.limit,
          page:params.offset/params.limit,
          sort:"id",
          direct:"desc",
          pageNum:this.pageNumber,
        };
        return paraObj;
      },
      columns: [{
        field: 'id',
        title: '序号',
        width: 50
      }, {
        field: 'tno',
        title: '工号',
        width: 130
      }, {
        field: 'tname',
        title: '姓名',
        width: 100
      }, {
        field: 'sex',
        title: '性别',
        width: 30
      }, {
        field: 'age',
        title: '年龄',
        width: 10,
      }, {
        field: 'prof',
        title: '职称',
        width: 50,
      }, {
        field: 'sal',
        title: '工资',
        width: 50,
      }, {
        field: 'dept',
        title: '所在院系',
        width: 50,
      }, {
        field: 'password',
        title: '密码',
        width: 50,
      }, {
        field: 'tno',
        title: '处理',
        width: 50,
        formatter:chuLiFormatterTeacher
      }],
      responseHandler: function (res){
        console.log(res);
        return {
          "total":res.data.total,
          "rows":res.data.rows
        };
      },
    })

  }
  function chuLiFormatterTeacher(value){
    return "<a href='#' onclick='editTeacher("+value+");' style='color: pink'>编辑</a>  <a href='#'  onclick='deleteTeacher("
            +value+")' style='color:pink;'>删除</a>"
  }

  function editTeacher(tno){
    $("#exampleModalTeacher").modal('show')

    $.ajax({
      url:'/administrator/getTeacher/'+tno
    }).done(function(rs){
      $("#idTeacher").val(rs.id);
      $("#tname").val(rs.tname);
      $("#tno").val(rs.tno);
      $("#ageTeacher").val(rs.age);
      $("#deptTeacher").val(rs.dept);
      $("#passwordTeacher").val(rs.password);
      $("#profTeacher").val(rs.prof);
      $("#salTeacher").val(rs.sal);
      if (rs.sex === "女"){
        $("#sexTeacher").val("2");
      } else {
        $("#sexTeacher").val("1");
      }
    })
  }

  function saveTeacher(){
    var data = $("#formTeacher").serialize();
    var id = $("#idTeacher").val();

    if (id < 1){
      $.ajax({
        url:'/administrator/insertTeacher',
        method:"POST",
        data:data
      }).done(function (){
        $("#studentTb2").bootstrapTable("destroy");
        $("#stuTable").bootstrapTable("destroy");
        loadTable();
        search();
        $("#exampleModalTeacher").modal('hide');
      })
    } else {
      $.ajax({
        url:'/administrator/updateTeacher',
        method:"PUT",
        data:data
      }).done(function(){
        $("#studentTb2").bootstrapTable("destroy");
        $("#stuTable").bootstrapTable("destroy");
        loadTable();
        search();
        $("#exampleModalTeacher").modal('hide');
      })
    }
  }

  function deleteTeacher(tno){

    if(confirm("确认删除?")){
      $.ajax({
        url:"/administrator/deleteTeacher/"+tno,
        method:"DELETE"
      }).done(function (){
        $('#stuTable').bootstrapTable("destroy");
        loadTable();
      });
    }

  }

  function preAddTeacher(){
    $("#idTeacher").val("");
    $("#tname").val("");
    $("#tno").val("");
    $("#ageTeacher").val("");
    $("#deptTeacher").val("");
    $("#passwordTeacher").val("");
    $("#profTeacher").val("");
    $("#salTeacher").val("");
    $("#sexTeacher").val("0");
    $("#idTeacher").val(0);
  }

  function login_jump(){
    $.ajax({
      url:'/administrator/displayListTeacher'
    }).done(function(rs){
      if(rs==null){
        window.location.href="/login";
      }
    })
  }
  $(function (){
    login_jump();
    loadTable();
  });

</script>


</body>
</html>